<template>
    <div id="ratingselect">
        <div class="rating-type border-1px">
            <span class="block color all" :class="{'active': selectType === 2}" @click="select(2)">{{desc.all}}<b class="count">{{ratings.length}}</b></span>
            <span class="block color positive" :class="{'active': selectType === 0}" @click="select(0)">{{desc.positive}}<b class="count">{{positives.length}}</b></span>
            <span class="block negative" :class="{'active': selectType === 1}" @click="select(1)">{{desc.negative}}<b class="count">{{negative.length}}</b></span>
        </div>
        <div class="switch border-1px">
            <span class="icon-check_circle" :class="{'active': onlyContent}" @click="toggleContent"></span>
            <span class="text" @click="toggleContent">只看有内容的评价</span>
        </div>
    </div>
</template>

<script>
    const POSITIVE = 0;
    const NEGATIVE = 1;
    const ALL = 2;

    export default {
        name: 'Ratingselect',
        props: {
            ratings: {
                type: Array,
                default() {
                    return [];
                }
            },
            selectType: {
                type: Number,
                default: ALL
            },
            onlyContent: {
                type: Boolean,
                default: false
            },
            desc: {
                type: Object,
                default() {
                    return {all: '全部', positive: '满意', negative: '不满意'}
                }
            }
        },
        methods: {
            select(type) {
                this.$emit('update:selectType', type);
            },
            toggleContent() {
                this.$emit('update:onlyContent', !this.onlyContent);
            }
        },
        computed: {
            positives() {
                return this.ratings.filter(item => item.rateType === POSITIVE);
            },
            negative() {
                return this.ratings.filter(item => item.rateType === NEGATIVE);
            }
        }
    }
</script>

<style scoped>
    .rating-type {
        padding: 18px 0;
        margin: 0 18px;
        position: relative;
        font-size: 0;
    }
    
    .rating-type::after {
        content: '';
        width: 100%;
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        border-bottom: 1px solid rgba(7, 17, 27, .1);
    }

    .block {
        display: inline-block;
        padding: 8px 12px;
        margin-right: 8px;
        border-radius: 1px;
        color: #666;
        font-size: 12px;
        line-height: 16px;
    }

    .block.active, 
    .block.active .count {
        color: #fff;
    }

    .color {
        background-color: rgba(0,160,220,.2);
    }
    
    .color.active {
        background-color: #00a0dc;
    }

    .negative {
        background-color: #ccc;
    }

    .negative.active {
        background-color: #666;
    }

    .count {
        font-weight: normal;
        color: initial;
        font-size: 8px;
        vertical-align: middle;
        margin-left: 2px;
    }

    .switch {
        padding: 12px 18px;
        line-height: 24px;
        position: relative;
        font-size: 0;
        color: rgb(147, 153, 159);
    }

    .switch::after {
        content: '';
        width: 100%;
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        border-bottom: 1px solid rgba(7, 17, 27, .1);
    }

    .icon-check_circle {
        margin-right: 4px;
        font-size: 24px;
        vertical-align: top;
        border-radius: 100%;
    }

    .icon-check_circle.active {
        color: #00b43c;
    }

    .text {
        font-size: 12px;
    }
</style>